<template>
  <div>
  <a-carousel :after-change="onChange">
     <div><img src="../assets/imgs/ad_zhuanxingsong.jpg" alt=""></div>
    <div><img src="../assets/imgs/banner_10years.jpg" alt=""></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </a-carousel>
   <div class="content">
        <h3>商品名字</h3>
    <textarea class="text">
    商品的介绍啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</textarea>

   </div>
   <div class="price">
    <span>￥50</span> 
    <span class="num">
        <a-icon @click="num--" type="minus-circle" />
        <input type="number" readonly="readonly"  v-model="num"/>
        <a-icon @click="num++" type="plus-circle" />
    </span>
    
</div>
 <a-button type="primary" block>
      加入购物车
    </a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:1,
    }
  },
  methods: {
    onChange(a, b, c) {
      console.log(a, b, c);
    },
  },
  
};

</script>
<style  scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #8308e7;
  overflow: hidden;
  touch-action: none;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.content{
    margin:5%;

}
.text{
    width: 100%;
    
}
.price{
    height: 50px;
    background-color:rgb(253, 241, 241);
    margin-top: 20px;
    padding-top: 15px;
 
    
    
}
span{
    margin: 15px;
    
}
a-icon{
  margin: 5px;
}
input{
  width: 40px;
  border: none;
  text-align: center;
}

.num{
   padding-left: 140px;
  
}
</style>

